<template>
  <ScreenFit>
    <div class="dashboard">
      <div class="header">
        <BoardHeader></BoardHeader>
      </div>
      <div class="content">
        <div class="content-left">
          <div class="content-left-item">
            <MonitorDetail1 :info="overviewInfo"></MonitorDetail1>
          </div>
          <div class="content-left-item">
            <MonitorDetail2 :info="tendData"></MonitorDetail2>
          </div>
          <div class="content-left-item">
            <MonitorDetail3 :info="alarmList"></MonitorDetail3>
          </div>
        </div>
        <div class="content-middle">
          <div class="content-middle-item">
            <MonitorDetail4 :rateInfo="chainRate"></MonitorDetail4>
          </div>
          <div class="content-middle-item">
            <div class="content-middle-item-left">
              <MonitorDetail5 :info="alarmSafeList"></MonitorDetail5>
            </div>
            <div class="content-middle-item-right">
              <MonitorDetail6></MonitorDetail6>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-item">
            <MonitorDetail7 :info="distributionAnalysisList"></MonitorDetail7>
          </div>
          <div class="content-right-item">
            <MonitorDetail8></MonitorDetail8>
          </div>
          <div class="content-right-item">
            <MonitorDetail9 :info="taskList"></MonitorDetail9>
          </div>
        </div>
      </div>
    </div>
  </ScreenFit>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import BoardHeader from '@/components/monitorDashBoard/BoardHeader.vue'
import MonitorDetail1 from '@/components/monitorDashBoard/MonitorDetail1.vue'
import MonitorDetail2 from '@/components/monitorDashBoard/MonitorDetail2.vue'
import MonitorDetail3 from '@/components/monitorDashBoard/MonitorDetail3.vue'
import MonitorDetail4 from '@/components/monitorDashBoard/MonitorDetail4.vue'
import MonitorDetail5 from '@/components/monitorDashBoard/MonitorDetail5.vue'
import MonitorDetail6 from '@/components/monitorDashBoard/MonitorDetail6.vue'
import MonitorDetail7 from '@/components/monitorDashBoard/MonitorDetail7.vue'
import MonitorDetail8 from '@/components/monitorDashBoard/MonitorDetail8.vue'
import MonitorDetail9 from '@/components/monitorDashBoard/MonitorDetail9.vue'
import {
  queryPatrolPanelServiceOverview,
  queryPatrolAlarmLocationByOrgId,
  queryPatrolAlarmList,
  queryPatrolTaskList,
  queryChainRate,
  queryTend
} from '@/api/monitorApi'
import { useRoute } from 'vue-router'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()

// 精准巡查概览
const overviewInfo = ref()
const getPatrolPanelServiceOverview = async () => {
  try {
    const res = await queryPatrolPanelServiceOverview({
      orgId: route.query.orgId,
      startTime: baseParamStore.baseParam?.pickTime[0],
      endTime: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      overviewInfo.value = res.data
    }
  } catch (error) {
    console.error('获取告警详情信息失败:', error)
  }
}

// 本月告警单、巡查任务统计地图
// const loactionInfo = ref()
// const getPatrolAlarmLocationByOrgId = async () => {
//   try {
//     const res = await queryPatrolAlarmLocationByOrgId({
//       orgId: route.query.orgId,
//       startDate: baseParamStore.baseParam?.pickTime[0],
//       endDate: baseParamStore.baseParam?.pickTime[1]
//     })
//     if (res && res.data) {
//       loactionInfo.value = res.data
//     }
//   } catch (error) {
//     console.error('获取本月告警单、巡查任务统计地图信息失败:', error)
//   }
// }

// 查询生物安全事件列表接口（告警)
const alarmList = ref()
const getPatrolAlarmList = async () => {
  try {
    const res = await queryPatrolAlarmList({
      orgId: route.query.orgId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      alarmList.value = res.data.data
    }
  } catch (error) {
    console.error('获取生物安全事件告警详情信息失败:', error)
  }
}

// 查询生物安全事件列表接口
const alarmSafeList = ref()
const getPatrolAlarmSafeList = async () => {
  try {
    const res = await queryPatrolAlarmList({
      orgId: route.query.orgId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1],
      patrolItem: '6'
    })
    if (res && res.data) {
      alarmSafeList.value = res.data.data
    }
  } catch (error) {
    console.error('获取生物安全事件详情信息失败:', error)
  }
}

// 本月告警单、巡查任务统计地图
const taskList = ref()
const getPatrolTaskList = async () => {
  try {
    const res = await queryPatrolTaskList({
      orgId: route.query.orgId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      taskList.value = res.data.data
    }
  } catch (error) {
    console.error('获取本月告警单、巡查任务统计地图信息失败:', error)
  }
}

// 精准巡查任务监控看板（服务部整体）- 环比
const chainRate = ref()
const getChainRate = async () => {
  try {
    const res = await queryChainRate({
      orgId: route.query.orgId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      chainRate.value = res.data
    }
  } catch (error) {
    console.error('获取本月告警单、巡查任务统计地图信息失败:', error)
  }
}

// 精准巡查任务监控看板（服务部整体）-趋势分析
const tendData = ref() // 告警趋势
const distributionAnalysisList = ref()
const getTend = async () => {
  try {
    const res = await queryTend({
      orgId: route.query.orgId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      tendData.value = res.data
      distributionAnalysisList.value = res.data.distributionAnalysisList
    }
  } catch (error) {
    console.error('获取趋势分析信息失败:', error)
  }
}

onMounted(() => {
  getPatrolPanelServiceOverview()
  // getPatrolAlarmLocationByOrgId()
  getPatrolAlarmList()
  getPatrolAlarmSafeList()
  getPatrolTaskList()
  getChainRate()
  getTend()
})
</script>

<style scoped lang="scss">
.dashboard {
  background: linear-gradient(90deg, #04102a, #123d70, #04102a);
  color: white;
  width: 100%;
  height: 100%;

  .content {
    display: flex;
    padding: 0 43px 30px;

    .content-left {
      width: 500px;
      background-color: rgba($color: #000000, $alpha: 0.1);
    }

    .content-middle {
      flex: 1;
      margin: 0 10px;

      &-item {
        display: flex;
        justify-content: space-between;
      }
    }

    .content-right {
      width: 500px;
      background-color: rgba($color: #000000, $alpha: 0.1);

      &-item {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
